@extends('user.layouts.app')
@section('title', '注册')
@section('content')
    <div class="flex justify-center items-center h-screen bg-gray-200 px-6">
        <div class="p-6 max-w-sm w-full bg-white shadow-md rounded-md">
            <div class="flex justify-center items-center">
                <span class="text-gray-700 font-semibold text-2xl">注册</span>
            </div>

            <form class="mt-4" action="{{ route('user.register') }}" method="POST">
                {{ csrf_field() }}
                <label class="block">
                    <span class="text-gray-700 text-sm">用户名</span>
                    <input type="text" name="username" placeholder="用户名" value="{{ old('username') }}" required class="form-input mt-1 block w-full rounded-md focus:border-indigo-600 @error('username')border-red-600 @enderror">
                    @error('username')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="block">
                    <span class="text-gray-700 text-sm">邮箱</span>
                    <input type="email" name="email" placeholder="邮箱" value="{{ old('email') }}" required class="form-input mt-1 block w-full rounded-md focus:border-indigo-600 @error('email')border-red-600 @enderror">
                    @error('email')
                    <p class="mt-2 text-sn text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="block mt-3">
                    <span class="text-gray-700 text-sm">密码</span>
                    <input type="password" name="password" placeholder="密码" required class="form-input mt-1 block w-full rounded-md focus:border-indigo-600 @error('password')border-red-600 @enderror">
                    @error('password')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <label class="block mt-3">
                    <span class="text-gray-700 text-sm">确认密码</span>
                    <input type="password" name="password_confirmation" placeholder="确认密码" required class="form-input mt-1 block w-full rounded-md focus:border-indigo-600 @error('password_confirmation')border-red-600 @enderror">
                    @error('password_confirmation')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>

                <div class="mt-6">
                    <button class="py-3 px-4 text-center bg-indigo-600 rounded-md w-full text-white text-sm hover:bg-indigo-500">
                        注册
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
